<template>
  <PageWrapper contentBackground contentClass="devce-config-wrapper" style="display: flex">
    <div class="title">网关配置</div>
    <div class="editeclick" type="primary" @click="handleClick">编辑</div>
    <a-spin :spinning="spinning">
      <a-form class="from" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol">
        <div class="row">
          <div class="item">
            <div class="title-left">用户名</div>
            <div class="ipt-right">
              {{ formState.account }}
            </div>
          </div>
          <div class="item miwen">
            <div class="title-left">密码</div>
            <div class="ipt-right">
              <input
                class="tagipt"
                readonly
                v-model="formState.password"
                :type="shopwdtext ? 'text' : 'password'"
              />
              <div class="icon">
                <img
                  src="../../../assets/images/open.png"
                  v-if="shopwdtext"
                  @click.stop="changetext(3)"
                />
                <img src="../../../assets/images/close.png" v-else @click.stop="changetext(3)" />

                <img src="../../../assets/images/copy.png" @click.stop="copy(formState.password)" />
              </div>
            </div>
          </div>
        </div>
        <div class="row miwen">
          <div class="item">
            <div class="title-left">AppKey</div>
            <div class="ipt-right">
              <input
                class="tagipt"
                readonly
                v-model="formState.app_key"
                :type="showappkeytext ? 'text' : 'password'"
              />
              <div class="icon">
                <img
                  src="../../../assets/images/open.png"
                  v-if="showappkeytext"
                  @click.stop="changetext(1)"
                />
                <img src="../../../assets/images/close.png" v-else @click.stop="changetext(1)" />
                <img src="../../../assets/images/copy.png" @click.stop="copy(formState.app_key)" />
              </div>
            </div>
          </div>
          <div class="item miwen">
            <div class="title-left">AppSecret</div>
            <div class="ipt-right">
              <input
                placeholder="'--"
                class="tagipt"
                readonly
                :type="showAppSecrettext ? 'text' : 'password'"
                v-model="formState.app_secret"
              />
              <div class="icon">
                <img
                  src="../../../assets/images/open.png"
                  v-if="showAppSecrettext"
                  @click.stop="changetext(2)"
                />
                <img src="../../../assets/images/close.png" v-else @click.stop="changetext(2)" />
                <img
                  src="../../../assets/images/copy.png"
                  @click.stop="copy(formState.app_secret)"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="item">
            <div class="title-left">网关版本</div>
            <div class="ipt-right">
              {{ formState.gateway_version }}
              <div class="lookBtn" @click.stop="openVersionInfo">查看</div>
            </div>
          </div>
          <div class="item">
            <div class="title-left">备注</div>
            <div class="ipt-right">
              {{ formState.comment }}
            </div>
          </div>
        </div>
      </a-form>
    </a-spin>
    <configEdite @register="registerModel" @success="submitSuccess" />
    <versionInfoDialog ref="versionInfoDialogRef" />
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent, onMounted, UnwrapRef, reactive, ref } from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { PageWrapper } from '/@/components/Page';
  import { getUser } from '/@/api/sys/storeData';
  import { getAuthCache } from '/@/utils/auth';
  import { ACCOUNT_ID } from '/@/enums/cacheEnum';
  import configEdite from './configEdite.vue';
  import versionInfoDialog from './versionInfoDialog.vue';
  import { useModal } from '/@/components/Modal';
  interface FormState {
    id: number | undefined;
    account: string | undefined;
    password: string;
    app_key: number | string | undefined;
    app_secret: number | string | undefined;
    comment: string | undefined;
    gateway_version: string | undefined;
    versionInfo: object;
  }
  export default defineComponent({
    name: 'GatewayConfigPage',
    components: { PageWrapper, configEdite, versionInfoDialog },
    setup() {
      const spinning = ref<boolean>(false);
      const [registerModel, { openModal: openModal }] = useModal();
      const { createMessage } = useMessage();
      const showappkeytext = ref(false);
      const showAppSecrettext = ref(false);
      const shopwdtext = ref(false);
      const actdisabled = ref(false);
      const versionInfoDialogRef = ref<any>(null);
      let formState: UnwrapRef<FormState> = reactive({
        id: undefined,
        account: undefined,
        password: '',
        app_key: '',
        app_secret: '',
        comment: '',
        gateway_version: '',
        versionInfo: {},
      });

      //确定属性弹框事件
      function submitSuccess() {
        reload();
        createMessage.success('编辑成功');
      }
      //编辑
      function handleClick() {
        formState.password = '';
        openModal(true, {
          formState,
        });
      }
      //复制
      async function copy(text) {
        if (text == undefined) {
          createMessage.warn('暂无数据');
          return false;
        }
        let target = document.createElement('input'); //创建input节点
        target.value = text; // 给input的value赋值
        document.body.appendChild(target); // 向页面插入input节点
        target.select(); // 选中input
        try {
          await document.execCommand('Copy'); // 执行浏览器复制命令
          createMessage.success('复制成功');
        } catch {
          createMessage.error('复制失败');
        }
      }
      //切换文本和密码类型
      function changetext(type) {
        if (type == 3) {
          shopwdtext.value = !shopwdtext.value;
        } else if (type == 1) {
          showappkeytext.value = !showappkeytext.value;
        } else if (type == 2) {
          showAppSecrettext.value = !showAppSecrettext.value;
        }
      }
      //打开版本信息弹框
      function openVersionInfo() {
        if (formState.versionInfo) {
          versionInfoDialogRef.value.getVsersionInfo(formState.versionInfo);
        }
      }
      onMounted(() => {
        reload();
      });
      function reload() {
        const id = getAuthCache(ACCOUNT_ID);
        getuser(id);
      }

      async function getuser(id) {
        spinning.value = true;
        const res = await getUser({ id: id });
        if (res) {
          spinning.value = false;
          formState.id = res.id;
          formState.account = res.account;
          formState.password = res.password;
          formState.app_key = res.app_key;
          formState.app_secret = res.app_secret;
          formState.comment = res.comment;
          formState.gateway_version = res.gateway_version.new_version;
          formState.versionInfo = res.gateway_version;
          if (formState.account != undefined) {
            actdisabled.value = true;
          }
        }
      }
      return {
        spinning,
        submitSuccess,
        handleClick,
        registerModel,
        openModal,
        actdisabled,
        copy,
        shopwdtext,
        changetext,
        showappkeytext,
        showAppSecrettext,
        formState,
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
        versionInfoDialogRef,
        openVersionInfo,
      };
    },
  });
</script>
<style lang="less">
  .devce-config-wrapper {
    margin: 0px !important;
    padding: 20px;
    box-sizing: border-box;
    position: relative;
    .editeclick {
      position: absolute;
      right: 20px;
      top: 20px;
    }
    .title {
      font-weight: 500;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.8);
      position: relative;
      padding-left: 12px;
      box-sizing: border-box;
      margin-bottom: 16px;
      &::before {
        content: '';
        display: inline-block;
        width: 4px;
        height: 16px;
        background: #2367fa;
        border-radius: 2px;
        position: absolute;
        top: 0px;
        bottom: 0px;
        margin: auto;
        left: 0px;
      }
    }
  }
  .tagipt {
    width: 81%;
  }
  .editeclick {
    text-align: right;
    font-size: 14px;
    color: #2c68ff;
    margin-bottom: 3px;
    font-size: 14px;
    font-family: PingFangSC, PingFangSC-Regular;
    cursor: pointer;
  }
  .from {
    border-top: 1px solid #efefef;
    border-left: 1px solid #efefef;
    .mr10 {
      margin-right: 10px;
    }

    img {
      width: 16px;
      height: 16px;
      margin-left: 12px;
      cursor: pointer;
    }
    .p-4 {
      display: felx;
      justify-content: center;
    }
    .ant-form-item {
      margin-bottom: 0px;
      width: 75%;
    }
    .miwen {
      .ant-form-item-control-input-content {
        display: flex;
        justify-content: space-between;
      }
      .icon {
        display: flex;
        position: absolute;
        right: 16px;
        top: 0px;
        bottom: 0px;
        margin: auto;
        align-items: center;
      }
      input:focus {
        border: none;
        outline: none;
      }
    }
    .row {
      width: 100%;
      display: flex;
      .item {
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 45.5px;
        width: 49.99%;
        border-right: 1px solid #efefef;
        border-bottom: 1px solid #efefef;
        color: rgba(0, 0, 0, 0.6);
        .title-left {
          border-right: 1px solid #efefef;
          height: 100%;
          display: flex;
          align-items: center;
          background-color: #f6f9ff;
          padding-left: 16px;
          box-sizing: border-box;
          width: 100px;
        }
        .ipt-right {
          flex: 1;
          height: 100%;
          display: flex;
          align-items: center;
          padding-left: 16px;
          font-size: 14px;
          position: relative;
          .lookBtn {
            position: absolute;
            right: 16px;
            top: 0px;
            bottom: 0px;
            margin: auto;
            align-items: center;
            display: flex;
            cursor: pointer;
          }
        }
      }
      .wid100 {
        width: 100% !important;
        justify-content: left;
        padding-left: 2.8%;
        box-sizing: border-box;
      }
    }
  }

  .miaoshu .ant-form-item {
    width: 100% !important;
  }

  .miaoshu .ant-form-item-control-input {
    margin-right: -7px;
  }
</style>
